<template>
	<view>
		<topDropdown :isSxShow="true" :isPaiXu="true" :dropdown1="dropdown1" :options1="options1" :optionsSx="sxList"
			:optionsPx="optionsPx" :isDuoXuan="true" searchLabel1="线索名称" searchPh1="请输入线索名称"
			@searchBoxEmitFun="searchBoxEmitFun" @dropDownFun1="dropDownFun1" @optionSxFun="optionSxFun"
			@optionPxFun="optionPxFun"></topDropdown>
		<scroll-view scroll-y="true" :style="{height: scrollHeight}" @scrolltolower="selectKehuFun" refresher-enabled
			:refresher-threshold="200" :refresher-triggered="triggered" refresher-background="gray"
			@refresherrefresh="onRefresh" @refresherrestore="onRestore">
			<view v-if="list.length > 0">
				<view v-for="(item, index) in list" :key="index">
					<clueCard :item="item" :isSelect="isSelect" :index="index" @cxGetDataFun="cxGetDataFun"></clueCard>
				</view>
				<getMore :isMore="isMore" nullMsg="已加载全部~"></getMore>
				<view class="h200"></view>
			</view>
			<dataNull v-else src="/static/img/dataNull.png" title="暂无相关线索哦~"></dataNull>
		</scroll-view>
		<addBtn url="./add"></addBtn>
		<u-action-sheet :list="sheetList" v-model="moreShow"></u-action-sheet>
	</view>
</template>

<script>
	let that = this;
	import {
		apiClue
	} from '@/api/crm.js'
	import {
		tyDropDown,
		defaultDropDown,
		khsxData,
		datePxData
	} from '@/utils/dropdown.js'
	import {
		getDayFun,
		formatDate,
		getDayByNumFun
	} from '@/utils/date.js'

	import dataNull from '@/components/dataNull/dataNull.vue'
	import addBtn from '@/components/addBtn/addBtn.vue'
	import getMore from '@/components/getMore/getMore.vue'
	import topDropdown from '@/components/topDropdown/topDropdown.vue'
	import lianxiRow from '@/components/lianxiRow/lianxiRow.vue'
	import clueCard from '@/components/card/clueCard.vue'

	export default {
		components: {
			dataNull,
			addBtn,
			getMore,
			topDropdown,
			lianxiRow,
			clueCard
		},
		data() {
			return {
				triggered: false,
				dropdown1: '全部',
				options1: defaultDropDown, //数据查看权限
				optionsPx: datePxData, //排序
				sxList: [],//顶部第三个筛选参数
				list: [],
				moreShow: false,
				sheetList: [{
						text: '添加跟进'
					},
					{
						text: '添加标签'
					}
				],
				isMore: true,
				pageNum: 1,
				scrollHeight: '667px',
				pageType: '',
				sortObj: {
					update_date: -1
				},
				optionsReq: {listtype:'selfson'}, // 第一个下拉框请求参数
				sortReq: {}, // 第二个排序请求参数
				dateReq: [], // 日期相关请求参数
				sxReq:{}, // 多条件筛选请求参数
				matchObj: {},
				searchValue: '',
				isSelect: false,
				depId: undefined
			}
		},
		onLoad(e) {
			that = this;
			
			//多条件筛选整理
			let cstDictSx = uni.getStorageSync('cstDictSx') || '';
			let khxdlist=[
				{title: '客户来源',field: 'source',current: '',arr: cstDictSx.source},
			];
			
			let sx=khsxData.concat(khxdlist);
			
			that.sxList =sx;
			
			if (e.type) {
				that.isSelect = true;
			}
			that.pageType = e.type ? e.type : '';
			uni.getSystemInfo({
				success(res) {
					that.scrollHeight = res.windowHeight - 40 + 'px';
				}
			})
			// if (e.next_gjDate) {
			// 	let dateArr = getDayByNumFun(e.next_gjDate);
			// 	let dateObj = {
			// 		field: 'next_gjDate',
			// 		sTime: dateArr[1],
			// 		eTime: dateArr[0]
			// 	};
			// 	let arr = that.sxList;
			// 	arr[0].current = 0;
			// 	that.sxList = arr;
			// 	that.dateReq.push(dateObj)
			// } else {
			// 	let arr = that.sxList;
			// 	arr[0].current = '';
			// 	that.sxList = arr;
			// }
			that.selectKehuFun(); //加载选择列表
			uni.$on('deleteKhFun', that.deleteKhFun)
			uni.$on('updateListByIndex', that.updateListByIndex)
			uni.$on('addItemInListFun', that.addItemInListFun)
			uni.$on('cxGetDataFun', that.cxGetDataFun)
			uni.$on('clueListChangeFun', that.cxGetDataFun)
		},
		onBackPress() {
			uni.$off('deleteKhFun', that.deleteKhFun)
			uni.$off('updateListByIndex', that.updateListByIndex)
			uni.$off('addItemInListFun', that.addItemInListFun)
			uni.$off('cxGetDataFun', that.cxGetDataFun)
			uni.$off('clueListChangeFun', that.cxGetDataFun)
		},
		methods: {
			// 查询客户
			selectKehuFun: function() {
				if (!that.isMore) {
					return
				}
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let matchObj = {
					openstatus: 1,
					
					keywords: that.searchValue
				}
				Object.assign(matchObj, that.matchObj,that.optionsReq, that.sxReq);
				
				let reqObj = {
					matchObj: matchObj,
					sortObj: that.sortReq,
					pageNum: that.pageNum,
				}
				
				let reqData = {
					action: 'get_list',
					params: reqObj
				}
				apiClue(reqData)
					.then(res => {
						this.triggered = false;
						let data = res.data.data;
						console.log(data)
						if (that.pageNum == 1) {
							that.list = [];
						}
						if (data.length == 10) {
							that.pageNum += 1;
							that.isMore = true;
						} else {
							that.isMore = false;
						}
						that.list = that.list.concat(data);
						setTimeout(() => {
							//延时关闭  加载中的 loading框
							uni.hideLoading()
						}, 888);

					})
			},
			// 下拉框回调函数
			dropDownFun1: function(e) {
				
				let optionsReq = {
					listtype:'selfson',
				};
				
				//默认自己及下属
				if (e.label == '全部') {
					optionsReq.listtype = 'selfson';
				} else if (e.label == '我负责的') {
					optionsReq.listtype = 'self';
				} else if (e.label == '下属负责') {
					optionsReq.listtype = 'son';
				} else if (e.label == '共享我的') {
					optionsReq.listtype = 'share';
				}
				that.optionsReq = optionsReq;
				console.log('第一个下拉参数：')
				console.log(optionsReq.listtype)
				that.cxGetDataFun();
			},
			// 筛选框回调函数
			optionSxFun: function(arr) {
				let matchReq = [];
				let dateReq = [];
				for (var i = 0; i < arr.length; i++) {
					if (arr[i].current !== '' && !arr[i].isDate) {
						matchReq.push({
							field: arr[i].field,
							value: arr[i].arr[arr[i].current]
						})
					} else if (arr[i].current !== '' && arr[i].isDate) {
						dateReq.push({
							field: arr[i].field,
							value: formatDate(arr[i].sTime) + '-' + formatDate(arr[i].eTime)
						})
					}
				}
				let reqObj = {};
				// 动态生成请求对象
				for (var i = 0; i < matchReq.length; i++) {
					reqObj[matchReq[i].field] = matchReq[i].value
				}
				//时间参数处理
				for (var i = 0; i < dateReq.length; i++) {
					reqObj[dateReq[i].field] = dateReq[i].value
				}
				
				that.sxReq = reqObj;
				console.log('第三个多选下拉参数：')
				console.log(reqObj)
				that.cxGetDataFun();
			},
			// 排序筛选框回调函数
			optionPxFun: function(arr) {
				let sortReq = {
					orderField: ''
				}
				let direaction = '';
				for (var i = 0; i < arr.length; i++) {
					if (arr[i].current !== '') {
						sortReq = {}
						if (arr[i].field == 'create_time') {
							sortReq.orderDirection = arr[i].current == 1 ? 'asc' : 'desc'
						}
						if (arr[i].field == 'update_time') {
							sortReq.orderDirection = arr[i].current == 1 ? 'asc' : 'desc'
						}
						if (arr[i].field == 'link_time') {
							sortReq.orderDirection = arr[i].current == 1 ? 'asc' : 'desc'
						}
						sortReq.orderField = arr[i].field;
						break;
					}
				}
				that.sortReq = sortReq;
				console.log('第二个排序回调的参数')
				console.log(sortReq)
				that.cxGetDataFun();
			},
			// 搜索框回调方法
			searchBoxEmitFun: function(e) {
				that.searchValue = e.searchValue1;
				that.cxGetDataFun()
			},
			// 下拉刷新
			onRefresh: function() {
				if (that.triggered) return
				that.triggered = true;
				that.cxGetDataFun();
			},
			onRestore: function(e) {
				that.triggered = false; // 需要重置
			},
			// 重新获取数据
			cxGetDataFun: function() {
				that.pageNum = 1;
				that.isMore = true;
				that.selectKehuFun();
			},
			//详细删除回调
			deleteKhFun: function(e) {
				let arr = that.list;
				arr.splice(e.index, 1);
				that.list = arr;
			},
			// 通过下标更新list数据
			updateListByIndex: function(e) {
				that.$set(that.list, parseInt(e.index), e.obj)
			},
			// add页面新增数据
			addItemInListFun: function(e) {
				let arr = that.list;
				arr.unshift(e);
				that.list = arr;
				uni.pageScrollTo({
					scrollTop: 0
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}

	.card {
		width: 698rpx;
		padding: 26rpx 26rpx 10rpx;
		margin: 32rpx 26rpx;
		box-sizing: border-box;
		border-radius: 8rpx;
		box-shadow: #d8d8d8 0px 0px 16rpx;
		position: relative;
		background-color: #FFFFFF;
	}

	.genjinBtn {
		position: absolute;
		right: 26rpx;
		top: 26rpx;
		background-color: #007AFF;
		color: #FFFFFF;
		text-align: center;
		padding: 6rpx 16rpx;
		border-radius: 6rpx;
		font-size: 14px;
	}

	.genjinBtn:active {
		background-color: #13B8FF;
	}

	.topRow {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.txView {
		width: 128rpx;
		height: 128rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 26rpx;
	}

	.txViewImg {
		width: 100%;
		height: 100%;
	}

	.info {
		width: 492rpx;
		font-size: 15px;
		color: #000;
	}

	.name {
		font-size: 16px;
		margin-bottom: 8rpx;
		color: #000000;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: bold;
	}

	.bottomRow {
		width: 100%;
		padding-top: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1rpx solid #f0f0f0;
		font-size: 15px;
		color: #007AFF;
	}

	.lxRow {
		display: flex;
		align-items: center;
	}

	.lxRow>image {
		width: 52rpx;
		height: 52rpx;
		margin-right: 26rpx;
	}

	.bqRow {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.bqRow>text {
		font-size: 14px;
		color: #888888;
	}

	.bqRow>view {
		padding: 6rpx 16rpx;
		font-size: 14px;
		background-color: rgba(255, 85, 127, 0.1);
		color: #ff5500;
		border-radius: 10rpx;
		margin: 6rpx 26rpx 20rpx 0;
	}
</style>
